import React, { Component } from 'react'
import { DetailWrapper, Header, Content } from './style';
import { connect } from 'react-redux'
import { getDetail } from './store/createActions'
import { withRouter} from 'react-router-dom'


class Detail extends Component {
    render() {
        const {title, content} = this.props
        return (
            <DetailWrapper>
                <Header>
                    {title}
                </Header>
                <Content dangerouslySetInnerHTML={{__html:content}}>
                    
                </Content>
            </DetailWrapper>
        )
    }
    componentDidMount() {
        this.props.getDetail(this.props.match.params.id)
    }
}
const mapProps = (state) => ({
    title: state.detail.get('title'),
    content: state.detail.get('content')
})
const mapDispatch = (dispatch) => ({
    getDetail(id){
        dispatch(getDetail(id))
    }
})
// withRouter让loadable有能力获得所有detail组件的内容
export default connect(mapProps, mapDispatch)(withRouter(Detail))